import React, { useState, useEffect } from 'react';
import {Search } from 'react-vant';
import axios from '../../../axioslist/index'
import '../../../api/index'
import { useDispatch, useSelector } from 'react-redux';
import { GETLISTDATA, ALLDATALIST } from '../../../types/index.d'
import { Grid,Image } from 'react-vant';
import { ShopO, } from '@react-vant/icons';


export default function Index() {
  const [value, setValue] = useState('');
  const dispatch = useDispatch()
  useEffect(() => {
    axios.get('/api/list').then(res => {
      dispatch({
        type: GETLISTDATA,
        payload: res.data.list
      })
    })
  }, [])

  const getlist = useSelector((state: ALLDATALIST) => {
    return state.list
  })



  return (
    <div>
      <div className="iour">
        <Search value={value} onChange={setValue} placeholder="请输入搜索关键词" /> <button>搜索</button>
      </div>

      <Grid columnNum={3}>
      {Array.from({ length: 6 }, (_, i) => (
        <Grid.Item key={i} icon={<ShopO />} text="文字" />
      ))}
    </Grid>
    <ul>
    {
      getlist.map((item,index)=>{
        return  <li>
          <p>{item.user}</p>
          <p><img src={item.img} alt="" /></p>
        </li>
      })
    }
    </ul>
    




    </div>
  )
}
